<template>
  <p v-for="item of list">
    {{ item.id }}
    <button @click="delSome(item)">删除</button>
  </p>

  <button @click="show">站三数据</button>
</template>
<script lang="ts" setup>
import {onMounted, ref, reactive, watch} from 'vue';
const list = [
  {
    "id": 8,
    "business_id": 5,
    "data_name": "门禁记录",
    "describe": "背景描述"
  },
  {
    "id": 14,
    "business_id": 5,
    "data_name": "固定人员门禁记录",
    "describe": "导出内容：junxhuang，pawngao员工2021年1月至今门禁信息"
  },
  {
    "id": 17,
    "business_id": 5,
    "data_name": "heartliu(刘鑫)门禁记录",
    "describe": "导出内容：heartliu(刘鑫)从2018-03-21至今的门禁记录"
  }
]

function show() {
  // console.log(list)
  // 遍历数组对比数据
  list.forEach((val,index,array) => {
    console.log("数据", val)
    console.log("数据", val.id)
  })
}

function delSome(e) {
  console.log("点击了删除",e.id)
  let delId = 0
  list.forEach((val,index,array) => {
    console.log("数据", val)
    console.log("数据", val.id)
    if (val.id == e.id) {
      console.log("找到了数据", val.id)
      delId = index
    }
  })
  if (delId > 0) {
    console.log('删除数据', delId)
    list.splice(delId, 1)
  }
  console.log("删除以后的数据",list)
}
</script>